<template>
  <div class="language-selector">
    <el-dropdown @command="switchLanguage" trigger="hover">
      <span class="selector-text">
        {{ currentLanguageDisplay }}
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="LANGUAGES.ZH" :disabled="isCurrentLanguage(LANGUAGES.ZH)">
            中文-简体
          </el-dropdown-item>
          <el-dropdown-item :command="LANGUAGES.EN" :disabled="isCurrentLanguage(LANGUAGES.EN)">
            English
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { getCurrentLanguage, changeLanguage, LANGUAGES, t } from '@/utils/i18n'
import { useLanguageStore } from '@/store/language'

// 使用语言store
const languageStore = useLanguageStore()

// 语言显示名称
const languageLabels = {
  [LANGUAGES.ZH]: '中文-简体',
  [LANGUAGES.EN]: 'English'
}

// 当前语言
const currentLang = ref(getCurrentLanguage())

// 当前语言显示名称
const currentLanguageDisplay = computed(() => {
  return languageLabels[currentLang.value] || languageLabels[LANGUAGES.ZH]
})

// 判断是否是当前语言
const isCurrentLanguage = (lang) => {
  return currentLang.value === lang
}

/**
 * 切换语言
 * @param {string} lang - 目标语言代码
 */
const switchLanguage = (lang) => {
  // 如果是当前语言，不做处理
  if (isCurrentLanguage(lang)) {
    return
  }
  
  try {
    // 直接调用i18n模块的changeLanguage，确保能正确设置
    const success = changeLanguage(lang)
    if (success) {
      // 更新当前语言引用
      currentLang.value = lang
      
      // 显示成功消息
      ElMessage.success(
        lang === LANGUAGES.ZH 
          ? '已切换到中文-简体' 
          : 'Switched to English'
      )
    } else {
      // 显示失败消息
      ElMessage.error('语言切换失败')
    }
  } catch (error) {
    // console.error('语言切换错误:', error)
    ElMessage.error('语言切换出错: ' + error.message)
  }
}

// 监听语言变化事件
onMounted(() => {
  const handleLanguageChange = (event) => {
    if (event.detail && event.detail.lang) {
      currentLang.value = event.detail.lang
    }
  }
  
  document.addEventListener('language-changed', handleLanguageChange)
  
  // 组件卸载时移除监听器
  onBeforeUnmount(() => {
    document.removeEventListener('language-changed', handleLanguageChange)
  })
})
</script>

<style scoped>
.language-selector {
  display: inline-flex;
  align-items: center;
}

.selector-text {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #2468f2; /* 更改为蓝色 */
  transition: color 0.3s;
  padding: 6px 12px;
  border-radius: 4px;
  border: none; /* 移除边框 */
  background-color: transparent; /* 移除背景色 */
}

.selector-text:hover {
  color: #1e4fc0; /* 悬停时深蓝色 */
  background-color: transparent; /* 移除悬停时的背景色 */
  border-color: transparent; /* 移除边框 */
}

.el-icon--right {
  margin-left: 6px;
  font-size: 12px;
}

:deep(.el-dropdown-menu__item) {
  color: #333;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item:hover:not(.is-disabled)) {
  background-color: transparent; /* 移除悬停背景色 */
  color: #2468f2;
}

:deep(.el-dropdown-menu__item.is-disabled) {
  color: #2468f2; /* 使选中项为蓝色 */
  background-color: transparent; /* 移除选中项的背景色 */
  cursor: default;
  opacity: 1; /* 保持不透明 */
}

:deep(.el-popper.is-light) {
  border: none !important;
  box-shadow: none !important; /* 移除阴影效果 */
}
</style> 